<div
  class="swiper-container newest-container swiper-container-initialized swiper-container-horizontal"
>
  <div class="swiper-wrapper" id="gameContainer4"></div>
</div>
<!-- Declare a JsRender template, in a script block:
-->
<script id="gameTmp4" type="text/x-jsrender">
    {{for list}}
        <div class="col-img swiper-slide">
        <a href="game.html?id={{:Id}}">
          <img
            data-src="{{:cover}}"
            src="{{:cover}}"
            lazy="loaded"
          />
          <div class="col-img-info">
            <div class="tit line-1">{{:name}}</div>
            <div class="desc">Play now</div>
          </div></a>
      </div>
  {{/for}}
</script>

<script>
  $.ajax({
    url: "https://app.nocodb.com/api/v2/tables/mg01furv08tboqh/records?viewId=vwkcjs6aeek51qs1&limit=200&shuffle=1&offset=0&where=(tag,anyof,New)",
    type: "GET",
    dataType: "json",
    headers: {
      "xc-token": "dePwLQ88UMbt4O9ndpBSQ-6RUC_nIhhpPea_0kTR",
    },
    contentType: "application/json; charset=utf-8",
    success: function (gameData) {
      // item Template
      let gameTmp4 = $.templates("#gameTmp4");

      let gameHtml = gameTmp4.render(gameData);
      $("#gameContainer4").html(gameHtml);

      var swiper = new Swiper(".swiper-container", {
        // 配置选项
        loop: true, // 循环模式选项
        slidesPerView: 1.33, // 显示当前图片和下一张的三分之一
        spaceBetween: 10, // 图片之间的间距
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要导航按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    },
    error: function (error) {
      console.error(error);
    },
  });
</script>
